🛠️ Type Of Change

• Feature

📖 Jira Ticket

DLT-3245

📖 Description

Add DtProse, a new container component that solely styles raw HTML to styled content. It can be thought of as a scoped CSS reset with opinionated style defaults, restoring the margins, list styles, heading sizes, and block-level formatting that the Dialtone reset strips away.

• Styles native HTML content elements within a scoped @layer dialtone.components container
• size prop (100, 200, 300) to shift scale of typography and spacing proportionally
• density prop (100, 200, 300) controls line-height independently from size
• CSS custom properties (--prose-*) enable consumer overrides without writing selectors
• Content validation strips non-essential attributes from inner elements and warns on disallowed elements (form controls, Vue components) in dev mode
• Does not parse markdown, provide syntax highlighting, or style Dialtone Vue components inside the slot — plain HTML only.

📦 Cross-Package Impact

📝 Checklist

For all PRs:

• I have ensured no private Dialpad links or info are in the code or pull request description.
• I have reviewed my changes.
• I have added all relevant documentation.
• I have considered the performance impact of my change.

For all Vue changes:

• I have added / updated unit tests.
• I have validated components with a screen reader.
• I have validated components keyboard navigation.

For all CSS changes:

• I have used design tokens whenever possible.
• I have considered how this change will behave on different screen sizes.
• I have visually validated my change in light and dark mode.
• I have used gap or flexbox properties for layout instead of margin whenever possible.

If new component:

• I am exporting any new components or constants:
  • from the index.js in the component directory.
  • from the index.js in the root (packages/dialtone-vue).
• I have added the styles for the new component to the packages/dialtone-css package.
• I have created a page for the new component on the documentation site in apps/dialtone-documentation.
• I have added the new component to common/components_list.js
• I have created a component story in storybook
• I have created story / stories for any relevant component variants in storybook
• I have created a docs page for the component in storybook.
• I have checked that changing all props/slots via the UI in storybook works as expected.